Managing Asynchronous State and API Requests in React Native

Course: React Native Training

Topic: Managing Asynchronous State and API Requests

Course Link: React Native Training – JustAcademy

Demo Link: Register for Course Demo

Website: JustAcademy Official Website

1. Introduction to Asynchronous State and API Requests

Modern React Native applications communicate with remote servers to retrieve data, authenticate users, submit forms, upload files, and update application information. These operations take time because they depend on network connectivity, server processing, and response delivery.

Asynchronous programming allows an application to start a time-consuming operation without blocking other JavaScript work while waiting for its result. Asynchronous state management means maintaining the application's data and user interface correctly while these operations are in progress, completed, or failed.

For example, a shopping application may request products from an API. While the request is running, the screen displays a loading indicator. When the request succeeds, the products appear. If the request fails, the application displays an error message and allows the user to retry.

1.1 Learning Objectives

• Understand asynchronous JavaScript, Promises, and async/await.
• Understand REST APIs, HTTP methods, headers, status codes, and JSON responses.
• Make GET, POST, PUT, PATCH, and DELETE requests using Fetch.
• Manage loading, success, error, and empty states.
• Fetch data using useEffect and useState.
• Use useReducer for more complex asynchronous state transitions.
• Prevent outdated requests from updating the current screen.
• Implement request cancellation, retries, pagination, and refreshing.
• Create reusable API services and custom hooks.
• Understand caching, offline handling, security, and performance.

2. Understanding Asynchronous JavaScript

2.1 What Is Asynchronous Programming?

Asynchronous programming allows JavaScript to initiate an operation that may finish later. Rather than waiting synchronously for the entire operation, the application can continue handling other work while the result is pending.

Common asynchronous operations include:

• Fetching information from a server.
• Authenticating users.
• Saving data to persistent storage.
• Uploading images and documents.
• Downloading files.
• Communicating through WebSockets.

2.2 Synchronous vs Asynchronous Operations

2.3 Synchronous Example

const price = 500;
const quantity = 3;
const total = price * quantity;
console.log(total); // 1500

The calculation finishes immediately because it does not depend on an external resource.

2.4 Asynchronous Example

async function getProducts() {
  const response = await fetch(
    "https://dummyjson.com/products"
  );

  if (!response.ok) {
    throw new Error("Unable to load products");
  }

  const data = await response.json();
  return data.products;
}

getProducts()
  .then((products) => console.log(products))
  .catch((error) => console.error(error.message));

The function waits for the network response at the await statement, while the rest of the application can continue responding to user interactions.

3. Understanding Promises

A Promise is a JavaScript object representing the eventual completion or failure of an asynchronous operation.

3.1 Promise States

3.2 Using then() and catch()

fetch("https://dummyjson.com/products")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Request failed");
    }
    return response.json();
  })
  .then((data) => {
    console.log(data.products);
  })
  .catch((error) => {
    console.error("API error:", error.message);
  });

The then() method processes a successful Promise result. The catch() method handles rejected Promises and errors thrown earlier in the Promise chain.

3.3 Using async/await

async function loadProducts() {
  try {
    const response = await fetch(
      "https://dummyjson.com/products"
    );

    if (!response.ok) {
      throw new Error(
        `HTTP error: ${response.status}`
      );
    }

    const data = await response.json();
    return data.products;
  } catch (error) {
    console.error(error.message);
    throw error;
  }
}

Async/await makes asynchronous code easier to read, especially when multiple operations must happen in sequence. The try/catch block handles errors from awaited operations.

4. Understanding APIs in React Native

4.1 What Is an API?

An Application Programming Interface (API) defines how software systems communicate. A mobile application commonly sends HTTP requests to a backend API, which processes the request and returns data or a response status.

For example, a mobile application may request a list of products. The server responds with JSON containing product IDs, names, prices, and descriptions.

4.2 Main Components of an API Request

• Endpoint: The URL that receives the request.
• HTTP method: Describes the operation to perform.
• Headers: Provide information such as content type and authentication.
• Request body: Contains data sent to the server.
• Status code: Indicates the HTTP response outcome.
• Response body: Contains the returned data or error details.

4.3 Common HTTP Methods

4.4 Common HTTP Status Codes

5. Making GET Requests Using Fetch

React Native provides the Fetch API for HTTP networking. It supports request methods, headers, and request bodies, and returns a Promise that resolves to a Response object.

5.1 Basic GET Request

async function fetchProducts() {
  const response = await fetch(
    "https://dummyjson.com/products"
  );

  if (!response.ok) {
    throw new Error(
      `Request failed: ${response.status}`
    );
  }

  const data = await response.json();
  return data.products;
}

The function sends a request, checks the HTTP response, parses JSON, and returns the product list.

Important: Fetch generally rejects for network-level failures, but HTTP responses such as 404 and 500 do not automatically reject the Promise. Always check response.ok or response.status.

5.2 Displaying API Data in a React Native Component

import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Text,
  View
} from "react-native";

export default function ProductsScreen() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    async function loadProducts() {
      setLoading(true);
      setError("");

      try {
        const response = await fetch(
          "https://dummyjson.com/products",
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error("Unable to fetch products.");
        }

        const data = await response.json();
        setProducts(data.products ?? []);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(
            err instanceof Error
              ? err.message
              : "An unexpected error occurred."
          );
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }

    loadProducts();

    return () => controller.abort();
  }, []);

  if (loading) {
    return ;
  }

  if (error) {
    return {error};
  }

  if (products.length === 0) {
    return No products found.;
  }

  return (
    
       String(item.id)}
        renderItem={({ item }) => (
          
            {item.title} - ${item.price}
          
        )}
      />
    
  );
}

This component demonstrates loading, success, error, and empty states. The AbortController signals cancellation when the component unmounts. Confirm cancellation support for the React Native version and networking environment used by your application.

6. Managing Asynchronous State

Asynchronous state represents both the data returned by an operation and the status of that operation. A robust interface should clearly communicate what is happening while the user waits for a response.

6.1 Four Common UI States

6.2 Managing State with useState

const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useState is suitable for small screens with a straightforward request. However, several separate state variables can become difficult to coordinate when the workflow becomes more complex.

6.3 Managing State with useReducer

useReducer centralizes related state transitions in a reducer function. It is useful when a request has multiple transitions that must remain consistent.

import { useReducer } from "react";

const initialState = {
  status: "idle",
  data: [],
  error: null
};

function apiReducer(state, action) {
  switch (action.type) {
    case "REQUEST":
      return {
        ...state,
        status: "loading",
        error: null
      };

    case "SUCCESS":
      return {
        status: "success",
        data: action.payload,
        error: null
      };

    case "FAILURE":
      return {
        ...state,
        status: "error",
        error: action.payload
      };

    default:
      return state;
  }
}

function Example() {
  const [state, dispatch] = useReducer(
    apiReducer,
    initialState
  );

  // dispatch({ type: "REQUEST" });
  // dispatch({ type: "SUCCESS", payload: products });
  // dispatch({ type: "FAILURE", payload: "Request failed" });

  return null;
}

The reducer defines how the state changes when a request starts, succeeds, or fails. A complete screen would dispatch these actions from its asynchronous request function and render content according to state.status.

7. Using useEffect for API Requests

useEffect is commonly used to synchronize a component with an external system, including a remote API. It can start a request after rendering and clean up when dependencies change or the component unmounts.

7.1 Fetch Data When a Screen Loads

useEffect(() => {
  async function loadData() {
    // Send the API request here.
  }

  loadData();
}, []);

An empty dependency array means the effect has no changing reactive dependencies. React Strict Mode may perform an additional setup-and-cleanup cycle in development, so effects should be written with correct cleanup and should not assume that requests always happen exactly once.

7.2 Fetch Data When an ID Changes

useEffect(() => {
  let ignore = false;

  async function loadUser() {
    setLoading(true);
    setError("");

    try {
      const response = await fetch(
        `https://dummyjson.com/users/${userId}`
      );

      if (!response.ok) {
        throw new Error("Unable to load user.");
      }

      const user = await response.json();

      if (!ignore) {
        setUser(user);
      }
    } catch (err) {
      if (!ignore) {
        setError(
          err instanceof Error
            ? err.message
            : "Unexpected error."
        );
      }
    } finally {
      if (!ignore) {
        setLoading(false);
      }
    }
  }

  loadUser();

  return () => {
    ignore = true;
  };
}, [userId]);

Whenever userId changes, React cleans up the previous effect and starts a new one. The ignore flag prevents an older response from overwriting the result for the currently selected user. It prevents stale updates but does not cancel the network request itself.

7.3 Why Should the Effect Callback Not Be async?

The function passed directly to useEffect should not be async because an async function returns a Promise, whereas React expects an optional cleanup function. Define an inner asynchronous function and call it from the effect instead.

8. Loading Indicators, Errors, and Empty States

8.1 Displaying a Loading Indicator

import { ActivityIndicator } from "react-native";

if (loading) {
  return ;
}

Show the indicator while the request is pending. Ensure the loading state is reset after success, failure, or cancellation when appropriate.

8.2 Showing an Error and Retry Action

if (error) {
  return (
    
      {error}
      
    
  );
}

This is a UI pattern, not a complete standalone component. It assumes loadProducts is defined in the same component and resets the error and loading state before starting another request.

8.3 Handling Empty Results

if (!loading && !error && products.length === 0) {
  return No products are available.;
}

An empty response is not necessarily an error. It may mean that a search found no matches or that a user has not created any records.

8.4 Common Error Categories

• Network error: The device cannot reach the server.
• HTTP error: The server returns a non-success status code.
• Parsing error: The response cannot be interpreted as expected.
• Validation error: Submitted data fails server-side validation.
• Authentication error: Credentials or session information are missing, invalid, or expired.
• Unexpected error: An unforeseen issue occurs during processing.

9. Making POST Requests

POST requests commonly submit information to a server, such as registration details, a contact message, a new product, or an order.

async function createPost(title, body) {
  const response = await fetch(
    "https://dummyjson.com/posts/add",
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title,
        body,
        userId: 1
      })
    }
  );

  if (!response.ok) {
    throw new Error("Unable to create post.");
  }

  return response.json();
}

The example uses a demonstration API. Its simulated write operations should not be treated as persistent production data.

9.1 Managing Form Submission State

const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState("");

async function handleSubmit() {
  if (submitting) return;

  setSubmitting(true);
  setSubmitError("");

  try {
    const result = await createPost(
      "Learning React Native",
      "Practicing asynchronous requests."
    );

    console.log("Created:", result);
  } catch (error) {
    setSubmitError(
      error instanceof Error
        ? error.message
        : "Submission failed."
    );
  } finally {
    setSubmitting(false);
  }
}

Keep submission state separate from screen-loading state when the screen also loads existing data. This prevents one operation from unnecessarily disabling or replacing the entire interface.

10. Updating and Deleting API Data

10.1 Updating Data with PATCH

async function updatePost(postId, title) {
  const response = await fetch(
    `https://dummyjson.com/posts/${postId}`,
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ title })
    }
  );

  if (!response.ok) {
    throw new Error("Unable to update post.");
  }

  return response.json();
}

PATCH is commonly used when only some fields need to change. The backend determines which fields can be updated and how the operation is applied.

10.2 Deleting Data

async function deletePost(postId) {
  const response = await fetch(
    `https://dummyjson.com/posts/${postId}`,
    { method: "DELETE" }
  );

  if (!response.ok) {
    throw new Error("Unable to delete post.");
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

Some successful DELETE requests return status 204 with no body. Avoid calling response.json() when no JSON content is present.

11. Creating a Reusable API Service

Separating networking logic from screen components improves reuse, testing, and maintainability. It also provides a central place to handle headers and common response behavior.

11.1 Create an API Helper

// services/api.js

const API_BASE_URL = "https://dummyjson.com";

export async function apiRequest(path, options = {}) {
  const response = await fetch(
    `${API_BASE_URL}${path}`,
    {
      ...options,
      headers: {
        Accept: "application/json",
        ...options.headers
      }
    }
  );

  if (!response.ok) {
    throw new Error(
      `Request failed with status ${response.status}`
    );
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

export function getProducts() {
  return apiRequest("/products");
}

export function getProductById(id) {
  return apiRequest(`/products/${id}`);
}

This helper can later be extended with request cancellation, authentication headers, timeouts, structured errors, response validation, and logging that avoids sensitive data.

11.2 Using the API Service in a Screen

import { getProducts } from "./services/api";

async function loadProducts() {
  try {
    setLoading(true);
    setError("");

    const result = await getProducts();
    setProducts(result.products ?? []);
  } catch (error) {
    setError(
      error instanceof Error
        ? error.message
        : "Unable to load products."
    );
  } finally {
    setLoading(false);
  }
}

This function assumes setLoading, setError, and setProducts belong to the component. Keep the service independent from component state so it can be reused in multiple screens and tested separately.

12. Creating a Custom useFetch Hook

A custom hook packages common request behavior so multiple components can reuse loading, data, and error management.

import { useEffect, useState } from "react";

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    async function runRequest() {
      setLoading(true);
      setError("");

      try {
        const response = await fetch(url, {
          signal: controller.signal
        });

        if (!response.ok) {
          throw new Error(
            `HTTP error: ${response.status}`
          );
        }

        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(
            err instanceof Error
              ? err.message
              : "Unable to fetch data."
          );
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }

    runRequest();

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

This basic hook reloads when the URL changes and requests cancellation during cleanup. It does not implement caching, retry controls, request deduplication, or refresh support. Those features may be added as the application's requirements grow.

12.1 Using the Custom Hook

function ProductDetails({ productId }) {
  const { data, loading, error } = useFetch(
    `https://dummyjson.com/products/${productId}`
  );

  if (loading) {
    return ;
  }

  if (error) {
    return {error};
  }

  if (!data) {
    return No product found.;
  }

  return (
    
      {data.title}
      ${data.price}
    
  );
}

This example assumes ActivityIndicator, Text, and View are imported from react-native and useFetch is imported from its file.

13. Request Cancellation and Race Conditions

13.1 What Is a Race Condition?

A race condition can occur when multiple asynchronous requests compete to update the same state. The order in which requests finish may differ from the order in which they started.

For example, a user searches for "phone" and then quickly searches for "tablet." If the first request finishes last, its older results could replace the newer tablet results.

13.2 Preventing Outdated Updates

Two common approaches are:

• Ignore flag: Prevents an obsolete effect from updating state.
• AbortController: Signals cancellation to supported APIs, including Fetch implementations that support AbortSignal.

useEffect(() => {
  const controller = new AbortController();

  async function loadData() {
    try {
      const response = await fetch(API_URL, {
        signal: controller.signal
      });

      if (!response.ok) {
        throw new Error("Request failed");
      }

      const result = await response.json();
      setData(result);
    } catch (error) {
      if (error.name !== "AbortError") {
        setError("Unable to load data.");
      }
    }
  }

  loadData();

  return () => controller.abort();
}, [API_URL]);

Cancellation is useful when a screen unmounts or a query changes. If cancellation is unavailable, use an ignore flag or request-identity mechanism to prevent obsolete results from changing the current interface.

14. Parallel and Sequential API Requests

14.1 Parallel Requests with Promise.all()

Independent requests can run concurrently, which can reduce total waiting time.

async function loadDashboard() {
  const [usersResponse, postsResponse] =
    await Promise.all([
      fetch("https://dummyjson.com/users"),
      fetch("https://dummyjson.com/posts")
    ]);

  if (!usersResponse.ok || !postsResponse.ok) {
    throw new Error("Dashboard request failed.");
  }

  const [users, posts] = await Promise.all([
    usersResponse.json(),
    postsResponse.json()
  ]);

  return { users, posts };
}

Promise.all() rejects when one of its input Promises rejects. Fetch HTTP failures usually resolve to Response objects, so status checks are still necessary. Use Promise.allSettled() when each request should be processed independently even if another fails.

14.2 Sequential Requests

Use sequential requests when the second request depends on the result of the first.

async function loadUserPosts(userId) {
  const userResponse = await fetch(
    `https://dummyjson.com/users/${userId}`
  );

  if (!userResponse.ok) {
    throw new Error("Unable to load user.");
  }

  const user = await userResponse.json();

  const postsResponse = await fetch(
    `https://dummyjson.com/posts/user/${user.id}`
  );

  if (!postsResponse.ok) {
    throw new Error("Unable to load user posts.");
  }

  const posts = await postsResponse.json();

  return { user, posts };
}

Use parallel execution for independent operations and sequential execution when later requests depend on earlier results.

15. Refreshing Data and Retry Logic

15.1 Pull-to-Refresh

React Native's RefreshControl can be used with ScrollView or FlatList to support pull-to-refresh behavior.

import { FlatList, RefreshControl, Text } from "react-native";

 String(item.id)}
  renderItem={({ item }) => (
    {item.title}
  )}
  refreshControl={
    
  }
/>

This pattern assumes refreshing is a boolean state variable and refreshProducts is a function that reloads the data. The function should reset refreshing in a finally block so the indicator does not remain visible after failure.

15.2 Retry Failed Requests

Retries can help recover from temporary network problems. Use a limited number of attempts and a delay between retries. Do not automatically retry every error.

const delay = (ms) =>
  new Promise((resolve) => setTimeout(resolve, ms));

async function fetchWithRetry(url, attempts = 3) {
  let lastError;

  for (let attempt = 0; attempt < attempts; attempt++) {
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(
          `HTTP error: ${response.status}`
        );
      }

      return await response.json();
    } catch (error) {
      lastError = error;

      if (attempt < attempts - 1) {
        await delay(500 * (2 ** attempt));
      }
    }
  }

  throw lastError;
}

This simplified example retries all thrown errors. Production implementations should classify failures and retry only appropriate transient errors. Consider exponential backoff with jitter, respect Retry-After when provided, and avoid retrying non-idempotent write requests without suitable safeguards.

16. Pagination and Infinite Scrolling

Large datasets should often be requested in smaller pages rather than downloaded all at once. Pagination reduces initial data transfer and helps the application remain responsive.

16.1 Pagination Concepts

• Page number: Identifies the requested page.
• Page size: Defines how many records to retrieve.
• Offset: Indicates how many records to skip.
• Cursor: A server-provided marker for the next segment.
• Has more: Indicates whether additional results are available.

16.2 Loading a Product Page

async function fetchProductPage(page, limit = 10) {
  const skip = (page - 1) * limit;

  const response = await fetch(
    `https://dummyjson.com/products?limit=${limit}&skip=${skip}`
  );

  if (!response.ok) {
    throw new Error("Unable to load product page.");
  }

  return response.json();
}

For infinite scrolling, append newly retrieved records to existing data rather than replacing the list. Prevent duplicate requests for the same page and allow failed page requests to be retried.

17. Caching and Server State Management

Caching stores previously retrieved information so it can be reused instead of repeatedly requesting the same data. It can improve perceived performance and reduce unnecessary network traffic.

17.1 Common Caching Strategies

• In-memory cache: Keeps results in application memory.
• Time-based freshness: Reuses results for a configured period.
• Stale-while-revalidate: Shows cached data while fetching a fresh version.
• Persistent cache: Saves selected information on the device.

17.2 Using TanStack Query

A dedicated server-state library such as TanStack Query can help manage caching, retries, refetching, and invalidation in larger applications.

// Requires installing and configuring
// @tanstack/react-query and QueryClientProvider.

const query = useQuery({
  queryKey: ["products"],
  queryFn: getProducts
});

// query.data
// query.isPending
// query.isError
// query.refetch()

This snippet demonstrates the API shape. It requires the library to be installed, a QueryClientProvider to be configured, and getProducts to be implemented. Check the current official documentation for version-specific details.

17.3 When Should You Use a Data-Fetching Library?

• The same server data is used across multiple screens.
• Requests need caching and deduplication.
• Data should refresh after creating, updating, or deleting records.
• The application needs consistent retry and error handling.
• Custom request logic has become difficult to maintain.

18. Managing API Data with Global State

Local component state is usually sufficient when one screen needs the result. Shared server data may benefit from a cache or state-management solution when several screens need consistent access.

Keep server state and client state conceptually separate where possible. Server state belongs to an external system and may become stale. Client state represents local interface choices such as selected tabs, open dialogs, and unsaved form input.

19. Offline Behavior and Persistent Data

Mobile devices may temporarily lose network connectivity. A robust application should communicate the problem clearly and decide whether it can show cached data, queue changes, or require the user to reconnect.

19.1 Recommended Offline Practices

• Show a clear connection error message.
• Preserve unsent form input where appropriate.
• Provide a retry action when a request fails.
• Use cached data when requirements allow it.
• Distinguish stale cached results from freshly retrieved data.
• Design conflict resolution for queued changes that overlap with server updates.

19.2 Using AsyncStorage

AsyncStorage is a community-maintained asynchronous key-value storage solution for non-sensitive persistent data. Values are strings, so objects and arrays must be serialized.

import AsyncStorage from
  "@react-native-async-storage/async-storage";

async function savePreferences(preferences) {
  await AsyncStorage.setItem(
    "appPreferences",
    JSON.stringify(preferences)
  );
}

async function loadPreferences() {
  const value = await AsyncStorage.getItem(
    "appPreferences"
  );

  return value ? JSON.parse(value) : null;
}

Install and configure the package according to its official documentation. In production code, catch storage and JSON parsing errors.

Security note: AsyncStorage is not encrypted. Do not store passwords, secret keys, or sensitive authentication tokens in it. Use an appropriate secure-storage solution for sensitive credentials.

20. API Security Best Practices

• Use HTTPS for production API communication.
• Never embed private server credentials or secret API keys in a mobile application bundle.
• Validate user input on both the client and server.
• Do not rely on client-side checks to enforce authorization.
• Keep authentication tokens out of logs and error messages.
• Use secure storage appropriate to the sensitivity of authentication credentials.
• Handle expired sessions and unauthorized responses consistently.
• Avoid sending unnecessary personal information in requests.
• Use cancellation or timeouts where appropriate.
• Do not expose raw internal server errors to end users.

21. Performance Optimization

21.1 Avoid Unnecessary Requests

Fetch only the data needed for the current screen. Reuse cached results when appropriate and avoid repeating requests because of unstable effect dependencies.

21.2 Keep Lists Efficient

Use FlatList for long lists instead of rendering every item inside a large ScrollView. Provide stable keys and keep renderItem work lightweight.

21.3 Prevent Duplicate Submissions

Disable a submit action while a request is in progress and guard against repeated calls. For payments or order creation, backend idempotency protection may also be required to prevent duplicate effects.

21.4 Avoid Stale State Updates

Cancel obsolete requests when possible or ignore results from outdated effects. This prevents older responses from overwriting newer information.

21.5 Use Appropriate Data Structures

For large datasets, consider storing entities by ID and maintaining an ordered list of IDs. This can simplify updates and reduce repeated searches through large arrays.

22. Common Problems and Troubleshooting

23. Best Practices Checklist

• Use async/await for readable asynchronous logic.
• Handle failures using try/catch.
• Check response.ok before assuming an HTTP request succeeded.
• Validate or safely handle the returned data structure.
• Represent loading, success, error, and empty states explicitly.
• Reset loading state in finally where appropriate.
• Use useEffect dependencies correctly.
• Cancel or ignore obsolete requests.
• Keep API service logic separate from UI rendering.
• Use custom hooks when multiple screens share the same pattern.
• Use caching when it improves the user experience.
• Retry only appropriate failures and limit attempts.
• Keep sensitive credentials out of application bundles and unencrypted storage.
• Test slow connections, offline scenarios, empty results, and server errors.

24. Practical Mini Project: Product Explorer App

Project Objective

Build a React Native application that retrieves product data from an API, displays a product list, supports refreshing, and handles loading, errors, and empty results.

Project Requirements

1. Create a ProductsScreen component.
2. Fetch data from https://dummyjson.com/products.
3. Show an ActivityIndicator while data is loading.
4. Display product titles and prices using FlatList.
5. Show an error message when the request fails.
6. Provide a retry action.
7. Display an empty-state message when no products are returned.
8. Add pull-to-refresh behavior.
9. Prevent outdated requests from updating the current screen.
10. Move networking logic into a reusable API service.

Suggested Project Structure

ProductExplorer/
├── App.js
├── components/
│   ├── ProductItem.js
│   ├── LoadingView.js
│   └── ErrorView.js
├── screens/
│   └── ProductsScreen.js
├── services/
│   └── api.js
└── hooks/
    └── useFetch.js

Expected Application Behavior

25. Practice Exercises

1. Create a screen that fetches users and displays their names.
2. Add loading, error, and empty states to the users screen.
3. Build a POST request that submits a contact form.
4. Implement a PATCH request to update a user's profile.
5. Create a DELETE action with confirmation and error handling.
6. Build a reusable custom hook for fetching data from a URL.
7. Use AbortController to cancel a request when its dependencies change.
8. Fetch users and posts in parallel with Promise.all().
9. Implement pagination using limit and skip parameters.
10. Add pull-to-refresh to a FlatList.
11. Test the application using an incorrect API endpoint.
12. Explore how a query-caching library can simplify server-state management.

26. Interview Questions and Answers

Q1. What is asynchronous state management?

It is the management of application data and interface status while operations such as API requests are in progress or have completed.

Q2. What is a Promise?

A Promise represents the eventual success or failure of an asynchronous operation.

Q3. What is async/await?

It is JavaScript syntax that makes Promise-based asynchronous code easier to read and write.

Q4. Why is try/catch useful?

It allows errors from awaited operations to be caught and handled instead of remaining unhandled.

Q5. What is the Fetch API?

It is a built-in interface for making HTTP requests and processing server responses.

Q6. Does Fetch automatically throw for HTTP 404?

No. Fetch generally resolves with a Response object. Check response.ok or the status code to detect HTTP failures.

Q7. What is the purpose of useEffect in API fetching?

It can synchronize a component with an external API and provide cleanup when the effect is replaced or the component unmounts.

Q8. Why should an effect callback not be async?

An async function returns a Promise, while useEffect expects its callback to return nothing or a cleanup function.

Q9. What are loading, success, error, and empty states?

They describe whether data is being fetched, has been retrieved, failed to load, or was retrieved with no results.

Q10. What is a race condition in API requests?

It occurs when requests finish in an unexpected order and an outdated response overwrites newer data.

Q11. What is AbortController?

It provides an AbortSignal that can be passed to supported asynchronous APIs, including compatible Fetch implementations, to request cancellation.

Q12. What is a custom hook?

A custom hook is a reusable function that uses React hooks to share logic such as fetching data and managing request states.

Q13. When should useReducer be used for asynchronous state?

It is useful when related transitions, such as request, success, and failure, should be coordinated in one reducer.

Q14. What is Promise.all()?

It waits for multiple Promises to fulfill and returns their results in input order. It rejects if any input Promise rejects.

Q15. What is pagination?

Pagination divides a large dataset into smaller sets so the application can retrieve and render data incrementally.

Q16. What is caching?

Caching retains previously retrieved data so it can be reused and may reduce network requests and loading time.

Q17. What is server state?

Server state is data owned by an external service that may change independently of the current application.

Q18. Why use a server-state library?

Libraries such as TanStack Query can provide caching, refetching, invalidation, and request lifecycle management.

Q19. Should API tokens be stored in AsyncStorage?

AsyncStorage is unencrypted, so sensitive authentication tokens should use an appropriate secure-storage solution instead.

Q20. How should an application handle failed requests?

It should classify the error, show a suitable message, preserve useful input or existing data when appropriate, and offer a retry when safe.

Q21. What is the difference between PUT and PATCH?

PUT generally replaces a resource representation, while PATCH applies a partial update. The exact behavior depends on the API contract.

Q22. Why separate API logic into service files?

It reduces duplication, simplifies testing, and separates networking concerns from presentation components.

Q23. How can duplicate submissions be prevented?

Disable the submit control while the operation is pending, guard against repeated calls, and use backend idempotency for operations that must not be duplicated.

Q24. What is stale-while-revalidate?

It is a strategy that displays cached data while fetching a newer version in the background.

Q25. What should be tested in asynchronous API code?

Test successful responses, HTTP errors, network failures, invalid data, empty results, cancellation, slow requests, retries, and duplicate submissions.

27. Quick Revision

• Asynchronous operations complete at a later time.
• Promises represent pending, fulfilled, or rejected work.
• Async/await makes Promise-based code easier to read.
• Fetch supports HTTP requests in React Native.
• Check response.ok because HTTP errors do not necessarily reject Fetch.
• Use useState or useReducer to represent request state.
• Use useEffect for appropriate external synchronization and cleanup.
• Represent loading, success, error, and empty states explicitly.
• Use cancellation or ignore flags to prevent obsolete requests from affecting the UI.
• Use Promise.all() for independent requests.
• Use pagination, caching, and appropriate retries for larger applications.
• Keep sensitive credentials out of unencrypted storage and client bundles.

28. Official Documentation and Learning Resources

• React Native Networking Documentation – Fetch requests, response handling, and network communication.
• React useEffect Documentation – Effect dependencies, cleanup, and fetching data.
• Synchronizing with Effects – Handling obsolete asynchronous results and cleanup.
• React Native Security Guidance – Secure handling of application data and credentials.
• React Native AsyncStorage – Persistent asynchronous key-value storage.
• TanStack Query Documentation – Server-state fetching, caching, and synchronization.
• Explore React Native Training at JustAcademy
• Register for a React Native Course Demo
• Visit JustAcademy

29. Conclusion

Managing asynchronous state and API requests is an essential skill for building reliable React Native applications. Understanding Promises, using async/await, checking HTTP responses, and handling loading, success, error, and empty states help developers create interfaces that remain clear while data is being retrieved.

As applications grow, reusable API services, custom hooks, request cancellation, pagination, caching, and dedicated server-state libraries can make data handling more efficient and maintainable. Combining these techniques with secure data practices, suitable error handling, and realistic testing provides a strong foundation for production-quality mobile applications.